import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    Image,
    View,
    TextInput,
    Alert,
    Slider,
    ScrollView,
    TouchableOpacity,
    ProgressBarAndroid,
} from 'react-native';
import FindItem from '../ui/findItem';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import TabLoadding from '../ui/tabLadding'
import pxToDp from '../config/pxToDp';
export default class MyScene extends Component{
    constructor(props) {
        super(props)
        this.state ={
            loaddingState:0,
            userName:'',
            userPic:'',
        }
        storage.getAllDataForKey('userInfo').then(res=>{
            let data = res[0]
            console.log(data)
            this.setState({
                loaddingState: 1,
                userName: data.nickname,
                userPic: data.headsmall,
                userPhone:data.phone
            })
        })

    }
    //退出
    setting() {
        
        this.props.navigation.navigate('settingScene')
        console.log(123)
        
    }

    render(){
        if(this.state.loaddingState == 1){
            return(
                < View style = { styles.viewPager } >
                    <View style={styles.pageStyle}>
                        <ScrollView>
                            <TouchableOpacity
                                onPress={()=>{
                                    this.props.navigation.navigate('userInfo', {
                                        userName: this.state.userName,
                                        userPic: this.state.userPic,
                                        userPhone: this.state.userPhone,
                                    })
                                }}
                            >
                                <View style={styles.partend}>
                                    <View style={styles.userPic}>
                                        <Image style={styles.imgLogo} source={{uri:this.state.userPic}} />
                                    </View>
                                    <View style={styles.partest}>
                                        <View style={styles.textTitle}>
                                            <Text style={styles.text}>{this.state.userName}</Text>
                                        </View>
                                        <View style={styles.textrightpar}>
                                            <View style={styles.textRow}>
                                                <TouchableOpacity style={styles.textright}
                                                onPress={()=>{
                                                    this.props.navigation.navigate('myQRcode')
                                                }}>
                                                    <MaterialCommunityIcons name='qrcode' size={20}  ></MaterialCommunityIcons>
                                                </TouchableOpacity>
                                                <View style={styles.textright}>
                                                    <MaterialCommunityIcons name='chevron-right' size={20}  ></MaterialCommunityIcons>
                                                </View>
                                            </View>
                                        </View>
                                        
                                    </View>
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity>
                                <View style={styles.danditem}>
                                    <FindItem icon={'qrcode-scan'} iconBg={{ backgroundColor: 'rgb(154,210,34)', }} text='扫一扫' />
                                </View>
                            </TouchableOpacity>
                            
                            <TouchableOpacity
                                onPress={() => {
                                        this.props.navigation.navigate('collect')
                                    }} 
                                >
                                <View >
                                    <FindItem icon={'star'}  iconBg={{ backgroundColor: 'rgb(154,210,34)', }} text='收藏' />
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={()=>{
                                console.log(this.props.navigation.navigate("friendCircleScene"))
                            }}>
                                <View >
                                    <FindItem icon={'image'} iconBg={{ backgroundColor: 'rgb(0,170,245)', }} text='相册' />
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity onPress={()=>{
                                    this.props.navigation.navigate('walletScene')
                                }}>
                                <View style={styles.danditem}>
                                    <FindItem icon={'currency-jpy'} borderBottom={{borderBottomWidth: 0,}} iconBg={{ backgroundColor: 'rgb(154,210,34)', }} text='钱包' />
                                </View>
                            </TouchableOpacity>
                            <TouchableOpacity 
                                onPress={this.setting.bind(this)}
                            >
                                <View style={styles.danditem}>
                                    <FindItem borderBottom={{borderBottomWidth: 0,}} icon={'settings'} iconBg={{ backgroundColor: 'rgb(0,170,245)', }} text='设置' />
                                </View>
                            </TouchableOpacity>
                        </ScrollView>
                    </View>
                    
                </View >
            )
        }else{
            return (
                < TabLoadding/>
            )
        }
        
        
    }

}

const styles ={
    viewPager: {
        flex: 1,
        // background:'#fff',
        
    },
    pageStyle: {
        alignItems: 'center',
        // padding: 20,
    },
    partend: {
        // flex:1,
        marginTop: 15,
        marginBottom: 15,
        height: 55,
        padding: 2.5,
        width: pxToDp(640),
        backgroundColor: "#fff",
        flexDirection: 'row',
    },
    userPic:{
        width: pxToDp(100),
        justifyContent: 'center',
    },
    imgLogo: {
        marginLeft: 8,
        marginRight: 5,
        height: 40,
        borderWidth: 1,
        borderBottomLeftRadius: pxToDp(70),
        borderTopLeftRadius: pxToDp(70),
        borderBottomRightRadius: pxToDp(70),
        borderTopRightRadius: pxToDp(70),
        width: pxToDp(65),
    },
    danditem: {
        marginBottom: 15,
    },
    partest: {
        width: pxToDp(525),
        height: 50,
        // justifyContent: 'center',
        flexDirection: 'row',
    },
    text: {
        color: 'rgb(40,40,40)',

    },
    textTitle: {
        justifyContent: 'center',
    },
    textrightpar: {
        flex: 1,
        alignItems:'flex-end',
        justifyContent: 'center',
    },
    textRow: {
        flexDirection: 'row',
    },
    textright: {
        alignSelf: 'flex-end',
    },

}